<template>
  <div id="right-key-menu" class="right-key-menu" @contextmenu.prevent>
    <div class="rightKeyMenuItem" @click="handleFileNameClick()">
      <el-icon class="icon"><View /></el-icon>查看
    </div>
    <div class="rightKeyMenuItem" @click="handleDeleteNameClick()">
      <el-icon class="icon"><Delete /></el-icon>删除
    </div>
    <div class="rightKeyMenuItem">
      <el-icon class="icon"><RefreshLeft /></el-icon>还原
    </div>
    <div class="rightKeyMenuItem">
      <el-icon class="icon"><Document /></el-icon>复制到
    </div>
    <div class="rightKeyMenuItem">
      <el-icon class="icon"><Promotion /></el-icon>移动
    </div>
    <div class="rightKeyMenuItem">
      <el-icon class="icon"><EditPen /></el-icon>重命名
    </div>
    <div class="rightKeyMenuItem">
      <el-icon class="icon"><Share /></el-icon>分享
    </div>
    <div class="rightKeyMenuItem" @click="handleDownloadFile">
      <el-icon class="icon"><Download /></el-icon>下载
    </div>
    <div class="rightKeyMenuItem">
      <el-icon class="icon"><Files /></el-icon>解压缩
    </div>
    <!-- <div class="rightKeyMenuItem">
      <el-icon class="icon"><Files /></el-icon>解压到当前文件夹
    </div> -->
    <!-- <div class="rightKeyMenuItem">
      <el-icon class="icon"><Files /></el-icon>解压到目标文件夹
    </div> -->
    <div class="rightKeyMenuItem">
      <el-icon class="icon"><Edit /></el-icon>在线编辑
    </div>
    <div class="rightKeyMenuItem">
      <el-icon class="icon"><Edit /></el-icon>复制链接
    </div>
    <div class="rightKeyMenuItem">
      <el-icon class="icon"><Document /></el-icon>文件详情
    </div>
  </div>
</template>
<script setup >
import fileListPinia from "@/store/modules/fileList";
import { delFile } from "@/api/disk/file";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["close"]);
const store = fileListPinia();
const file = ref();
const onload = (row, column, event) => {
  file.value = row;
  //调整菜单出现的位置
  let menu = document.querySelector("#right-key-menu");
  let betweenHeight = document.body.clientHeight - event.clientY;
  if (betweenHeight < 150) {
    menu.style.top = event.clientY - 80 + "px";
  } else {
    menu.style.top = event.clientY - 130 + "px";
  }
  menu.style.left = event.clientX - 180 + "px";
};
//查看
function handleFileNameClick() {
  window.open(`${store.lucyUrl}/disk/preview/${file.value.id}`, "_blank");
  emit("close");
}
//删除
function handleDeleteNameClick() {
  proxy.$modal
    .confirm(`确定要删除 ‘ ${file.value.fileName} ’ 吗`)
    .then(function () {
      return delFile(file.value.id);
    })
    .then(() => {
      proxy.$modal.msgSuccess("文件删除成功");
      emit("close");
      //刷新
      store.flushed = !store.flushed;
    })
    .catch(function () {});
}
//下载
function handleDownloadFile() {
  location.href = `${store.lucyUrl}/disk/download/${file.value.id}`;
  emit("close");
}
defineExpose({
  onload,
});
</script>      
<style>
.right-key-menu {
  display: block;
  line-height: 35px;
  text-align: left;
}
.right-key-menu:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.right-key-menu {
  position: absolute;
  background-color: #fff;
  width: 155px;
  font-size: 14px;
  color: #444040;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  white-space: nowrap;
  z-index: 1000;
}
.rightKeyMenuItem:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
.icon {
  border: none;
  vertical-align: middle;
  margin-right: 8px;
  margin-top: -4px;
  margin-left: 8px;
}
</style>